<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>3D标签</title>

    <style type="text/css">
        .tagBall{width:800px;height:800px;margin:50px auto;position:relative;}
        .tag{display:block;position:absolute;left:0px;top:0px;color:#000;text-decoration:none;font-size:15px;font-family:"微软雅黑";font-weight:bold;}
        .tag:hover{border:1px solid #666;}
		
		@font-face {
		    font-family: "spark"; /* Project id 3213744 */
		    src: url('//at.alicdn.com/t/font_3213744_oy5n766h1c.woff2?t=1646192519443') format('woff2'),
		    url('//at.alicdn.com/t/font_3213744_oy5n766h1c.woff?t=1646192519443') format('woff'),
		    url('//at.alicdn.com/t/font_3213744_oy5n766h1c.ttf?t=1646192519443') format('truetype');
		}
		.search-ipt{
		    position: relative;
		    padding-left: 36px;
		}
		.search-ipt:before{
		    display: block;
		    position: absolute;
		    top: 50%;
		    left: 0;
		    transform: translateY(-50%);
		    content: '这里';
		    font-family: "spark" !important;
		    font-size: 80px;
		    font-style: normal;
		    -webkit-font-smoothing: antialiased;
		    -moz-osx-font-smoothing: grayscale;
		    color: red;
		    z-index: 999999;
		}
		
		
    </style>

</head>
<body>

<!-- <div class="tagBall">
    <a class="tag" target="_blank" href="#">java</a>
    <a class="tag" target="_blank" href="#">Spring</a>
    <a class="tag" target="_blank" href="#">javascript</a>
    <a class="tag" target="_blank" href="#">Python</a>
    <a class="tag" target="_blank" href="#">后半夜</a>
    <a class="tag" target="_blank" href="#">java</a>
    <a class="tag" target="_blank" href="#">Spring</a>
    <a class="tag" target="_blank" href="#">javascript</a>
    <a class="tag" target="_blank" href="#">Python</a>
    <a class="tag" target="_blank" href="#">后半夜</a>
    <a class="tag" target="_blank" href="#">java</a>
    <a class="tag" target="_blank" href="#">Spring</a>
    <a class="tag" target="_blank" href="#">javascript</a>
    <a class="tag" target="_blank" href="#">Python</a>
    <a class="tag" target="_blank" href="#">后半夜</a>
    <a class="tag" target="_blank" href="#">java</a>
    <a class="tag" target="_blank" href="#">Spring</a>
    <a class="tag" target="_blank" href="#">javascript</a>
    <a class="tag" target="_blank" href="#">Python</a>
    <a class="tag" target="_blank" href="#">后半夜</a>
    <a class="tag" target="_blank" href="#">java</a>
    <a class="tag" target="_blank" href="#">Spring</a>
    <a class="tag" target="_blank" href="#">javascript</a>
    <a class="tag" target="_blank" href="#">Python</a>
    <a class="tag" target="_blank" href="#">后半夜</a>
    <a class="tag" target="_blank" href="#">java</a>
    <a class="tag" target="_blank" href="#">Spring</a>
    <a class="tag" target="_blank" href="#">javascript</a>
    <a class="tag" target="_blank" href="#">Python</a>
    <a class="tag" target="_blank" href="#">后半夜</a>
    <a class="tag" target="_blank" href="#">java</a>
    <a class="tag" target="_blank" href="#">Spring</a>
    <a class="tag" target="_blank" href="#">javascript</a>
    <a class="tag" target="_blank" href="#">Python</a>
    <a class="tag" target="_blank" href="#">后半夜</a>
    <a class="tag" target="_blank" href="#">java</a>
    <a class="tag" target="_blank" href="#">Spring</a>
    <a class="tag" target="_blank" href="#">javascript</a>
    <a class="tag" target="_blank" href="#">Python</a>
    <a class="tag" target="_blank" href="#">后半夜</a>

</div> -->
<video name="videoElement" class="centeredVideo" controls autoplay>
                    Your browser is too old which doesn't support HTML5 video.
</video>




<script src="http://bilibili.github.io/flv.js/dist/flv.js" type="text/javascript"></script>
<script type="text/javascript">
	var checkBoxFields = ['isLive', 'withCredentials', 'hasAudio', 'hasVideo'];
	        var streamURL, mediaSourceURL;
	
	        function flv_load() {
	            console.log('isSupported: ' + flvjs.isSupported());
	            if (mediaSourceURL.className === '') {
	                var url = document.getElementById('msURL').value;
	    
	                var xhr = new XMLHttpRequest();
	                xhr.open('GET', url, true);
	                xhr.onload = function (e) {
	                    var mediaDataSource = JSON.parse(xhr.response);
	                    flv_load_mds(mediaDataSource);
	                }
	                xhr.send();
	            } else {
	                var i;
	                var mediaDataSource = {
	                    type: 'flv'
	                };
	                for (i = 0; i < checkBoxFields.length; i++) {
	                    var field = checkBoxFields[i];
	                    /** @type {HTMLInputElement} */
	                    var checkbox = document.getElementById(field);
	                    mediaDataSource[field] = checkbox.checked;
	                }
	                mediaDataSource['url'] = document.getElementById('sURL').value;
	                console.log('MediaDataSource', mediaDataSource);
	                flv_load_mds(mediaDataSource);
	            }
	        }
	
	        function flv_load_mds(mediaDataSource) {
	            var element = document.getElementsByName('videoElement')[0];
	            if (typeof player !== "undefined") {
	                if (player != null) {
	                    player.unload();
	                    player.detachMediaElement();
	                    player.destroy();
	                    player = null;
	                }
	            }
	            player = flvjs.createPlayer(mediaDataSource, {
	                enableWorker: false,
	                lazyLoadMaxDuration: 3 * 60,
	                seekType: 'range',
	            });
	            player.attachMediaElement(element);
	            player.load();
	        }
	
	        function flv_start() {
	            player.play();
	        }
	
	        function flv_pause() {
	            player.pause();
	        }
	
	        function flv_destroy() {
	            player.pause();
	            player.unload();
	            player.detachMediaElement();
	            player.destroy();
	            player = null;
	        }
	
	        function flv_seekto() {
	            var input = document.getElementsByName('seekpoint')[0];
	            player.currentTime = parseFloat(input.value);
	        }
	
	        function switch_url() {
	            streamURL.className = '';
	            mediaSourceURL.className = 'hidden';
	            saveSettings();
	        }
	
	        function switch_mds() {
	            streamURL.className = 'hidden';
	            mediaSourceURL.className = '';
	            saveSettings();
	        }
	
	        function ls_get(key, def) {
	            try {
	                var ret = localStorage.getItem('flvjs_demo.' + key);
	                if (ret === null) {
	                    ret = def;
	                }
	                return ret;
	            } catch (e) {}
	            return def;
	        }
	
	        function ls_set(key, value) {
	            try {
	                localStorage.setItem('flvjs_demo.' + key, value);
	            } catch (e) {}
	        }
	
	        function saveSettings() {
	            if (mediaSourceURL.className === '') {
	                ls_set('inputMode', 'MediaDataSource');
	            } else {
	                ls_set('inputMode', 'StreamURL');
	            }
	            var i;
	            for (i = 0; i < checkBoxFields.length; i++) {
	                var field = checkBoxFields[i];
	                /** @type {HTMLInputElement} */
	                var checkbox = document.getElementById(field);
	                ls_set(field, checkbox.checked ? '1' : '0');
	            }
	            var msURL = document.getElementById('msURL');
	            var sURL = document.getElementById('sURL');
	            ls_set('msURL', msURL.value);
	            ls_set('sURL', sURL.value);
	            console.log('save');
	        }
	
	        function loadSettings() {
	            var i;
	            for (i = 0; i < checkBoxFields.length; i++) {
	                var field = checkBoxFields[i];
	                /** @type {HTMLInputElement} */
	                var checkbox = document.getElementById(field);
	                var c = ls_get(field, checkbox.checked ? '1' : '0');
	                checkbox.checked = c === '1' ? true : false;
	            }
	
	            var msURL = document.getElementById('msURL');
	            var sURL = document.getElementById('sURL');
	            msURL.value = ls_get('msURL', msURL.value);
	            sURL.value = ls_get('sURL', sURL.value);
	            if (ls_get('inputMode', 'StreamURL') === 'StreamURL') {
	                switch_url();
	            } else {
	                switch_mds();
	            }
	        }
	
	        function showVersion() {
	            var version = flvjs.version;
	            document.title = document.title + " (v" + version + ")";
	        }
	
	        var logcatbox = document.getElementsByName('logcatbox')[0];
	        flvjs.LoggingControl.addLogListener(function(type, str) {
	            logcatbox.value = logcatbox.value + str + '\n';
	            logcatbox.scrollTop = logcatbox.scrollHeight;
	        });
	
	        document.addEventListener('DOMContentLoaded', function () {
	            streamURL = document.getElementById('streamURL');
	            mediaSourceURL = document.getElementById('mediaSourceURL');
	            loadSettings();
	            showVersion();
	            flv_load();
	        });
	
	
</script>

</body>
</html>
